<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        margin: 0;
        padding: 0;
        background: #708d00;
    }
    .card{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 300px;
        height: 400px;
        background-color: #fff;
        transform-style: preserve-3d;
        transform: translate(-50%,-50%);
        transform: perspective(2000px);
        box-shadow: inset 300px 0 50px rgba(0,0,0,.5), 0 20px 100px rgba(0,0,0,.5);
        transition: 1s;
    }
    .card:hover{
        transform: translate(50%,50%);
        transform: perspective(2000px);
        transform: rotate(-5deg);
        box-shadow: inset 20px 0 50px rgba(0,0,0,.5), 0 10px 100px rgba(0,0,0,.5);
    }
    .card::before{
        content:"";
        position: absolute;
        top: -5px;
        left: 0;
        width: 100%;
        height: 5px;
        background: #475b02;
        transform-origin: bottom;
        transform: skewX(-45deg);
    }
    .card::after{
        content: "";
        position: absolute;
        top: 0;
        right: -5px;
        width: 5px;
        height: 100%;
        background: #7ea301;
        transform-origin: left;
        transform: skewY(-45deg);
    }
    .card .imgBox{
        width: 100%;
        height: 100%;
        position: relative;
        transform-origin: left;
        transition: 1s;
        
    }
    .card:hover .imgBox{
        transform: rotateY(-155deg);
        
    }
    .card .imgBox img{
        width: 100%;
        height: 100%;
    }
    .card .details{
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        padding: 20px;
        z-index: -1;
    }
</style>
<body>
    <div class="card">
        <div class="imgBox">
            <img src="./beaut.jpg"/>
        </div>
        <div class="details">
            <h2>是否阅读此书？</h2>
            <p>进入！！</p>
            <button>确定</button>
        </div>
    </div>
</body>
</html>